公司官网前端开发经验分享

公司官网的重要性和特殊性不言而喻。
很多前端都会经历这个项目，笔者有幸在所就职的每家公司都负责过官网的前端开发工作。开发中遇到过很多问题，反思起来值得和大家一起分享，以减少或者减低大家可能遇到的问题。

---

理想开发流程
UI => 开发 =》 测试 =》 上线

现实开发流程
需求方 =》 UI => 开发 =》需求方 =》 UI => 测试 =》需求方 =》 ...... UI => 上线 =》需求方 =》 UI => 开发 测试 =》上线

实际开发中需求及UI会一直调整，直到上线以后仍会不停调整。
所以，前期的需求评审至关重要。一定要让需求方（一般是市场部负责人）评审通过以后再开发。

吐槽：官网是我见到为数不多的产品总监PK不过市场总监的项目之一。一般项目，前端展示效果产品总监拍板即可。

---

0. 特性

1. 跨部门沟通
2. 跨项目耦合
3. PWA
4. 测试的重要性
5. 工期的紧迫性
6. 项目重要性
7. SEO的重要性

1. 跨部门沟通

由于官网的特殊性，官网通常会涉及多部门协作。

• 市场部：需求方，一般官网都必须满足市场部推广需求
• 销售部：半需求方，一般官网都必须满足市场部推广需求
• 人力部：半需求方，辅助招聘需求
• 客服部：半需求方，辅助客服需求
• 产品部：设计，对UI及UE负责
• 开发部：开发，对技术及开发进度负责
• 测试部：测试，对质量、效果负责，保证测试充分
• 运维部：运维，对网络及服务器负责
• 运营部：文案，对文案及SEO推广负责
• 国际化：翻译，保证文案翻译的准确性及效率（一般小公司会外包，所以必须保证时效）

2. 跨项目耦合

• 用户系统：实现单点登录（SSO）功能
• 公司产品：涉及到公司产品的子项目
• 官方博客：如blog、wiki、zendesk等
• 客服功能：WeChat、App、小程序、微博等功能的集成

3. PWA

1. 可靠性

• 跨终端可用性
• 离线可以访问基本功能
• 保证服务长期可访问

2. 快速性

• 可交互等待时长
• 加载速度

3. 友好性

• 合理的布局
• 友好的UI设计
• 便捷的交互
• 适合不同国家的用户使用习惯，如阿拉伯语国家 direction
• 无障碍阅读

4. 测试的重要性

• 自测
• 产品
• 测试部门
• 公司内测

5. 工期的紧迫性

由于官网是企业对外宣传的重要工具，所以一般会要求时效性，如新闻、咨询、招聘信息等及时更新。

以及活动页的开发，如周年庆、春节、促销、展会、推广等活动。

6. 项目重要性

由于官网是企业的门面，一般公司（中小型企业）的老板都会对官网亲自把关，通过官网来展现公司的企业文化。所以，倘若你在中小型企业，接手官网的话，拿出看家本领把官网做好也是非常值得的。

7. SEO的重要性

由于官网的特殊性，往往公司会付费做SEO推广，所以，官网的SEO友好性不言而喻。这就要求我们在项目技术选型期要慎重考虑，想办法将SEO做的更好，这样就可以大幅节省推广成本，达到事半功倍的效果。

现在适合SEO的方法比较多，如SSR、Prerender等其他方式。

检查清单

1. 参与需求评审，待定稿后开始开发
2. 工期预估，按正常工时的1.5-2倍时间进行预估，后期更改会比较频繁
3. 硬件条件提前准备，如服务器、SSL、HTTPS等需要提前准备，待项目上线前搞定。
4. 对老官网的兼容性，新官网发布前务必邮件告知公司全部高管，让大家自行修改，处理新老官网更换代理的问题。如，页面路径发生变化。
5. 统计工具兼容（友盟、GA等）
6. 埋点及上报代码不应遗漏
7. 公测（公司内部测试，尽量保证1周左右的时间，让大家体验并上报问题）